<template>
  <div class="dashboard-container">
    <div class="dashboard-text">服务构建</div>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 提示区 -->
      <el-alert
        title="服务构建，请按步骤进行操作"
        type="info"
        center
        show-icon
        :closable="false"
      />
      <!-- 步骤条 -->
      <el-steps :active="activeIndex - 0" finish-status="success" simple style="margin-top: 20px">
        <el-step title="步骤 1 基本信息" icon="el-icon-edit" />
        <el-step title="步骤 2 参数及协议" icon="el-icon-upload" />
        <el-step title="步骤 3 开放PATH" />
      </el-steps>
      <!-- tab栏区域 -->
      <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="100px" label-position="top" class="form_tab">
        <el-tabs v-model="activeIndex" tab-position="left" :before-leave="beforeTabLeave" @tab-click="tabClicked">
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="服务全名" prop="servicename">
              <el-input v-model="addForm.servicename" placeholder="请输入服务名称" />
            </el-form-item>
            <el-form-item label="服务版本" prop="serviceversion">
              <el-input v-model="addForm.serviceversion" placeholder="请输入服务版本" />
            </el-form-item>
            <el-form-item label="长度限制" prop="servicelength">
              <el-input v-model="addForm.servicelength" placeholder="请输入长度限制" />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="参数及协议" name="1">
            <div class="title">请选择一个接入协议</div>
            <el-form-item label="WSDL地址" prop="wsdladress">
              <el-input v-model="addForm.wsdladress" placeholder="请输入WSDL地址" />
            </el-form-item>
            <el-form-item label="命名空间" prop="namespace">
              <el-input v-model="addForm.namespace" placeholder="请输入命名空间" />
            </el-form-item>
            <el-form-item label="EndPoint" prop="endpoint">
              <el-input v-model="addForm.endpoint" placeholder="请输入EndPoint" />
            </el-form-item>
            <el-form-item label="Bindling" prop="bindling">
              <el-input v-model="addForm.bindling" placeholder="请输入Bindling" />
            </el-form-item>
            <div class="title">编辑入参</div>
            <el-row style="padding-top:10px;">
              <el-button type="primary" round plain size="small" icon="el-icon-plus" @click="addNewTabble1">新增</el-button>
            </el-row>
            <el-table
              :key="tablekey1"
              :header-cell-style="{
                'text-align': 'center',

                background: '#FAFAFA',
                'font-weight': '400',
              }"
              :cell-style="{
                'text-align': 'center',

                'margin-bottom': '0',
              }"
              :data="addForm.tableDatas"
              border
              style="margin-top: 10px"
            >
              <!-- <el-table-column label="ID">
                <template slot-scope="scope">
                  <el-form :model="scope.row">
                    <el-form-item size="mini">
                      <el-input
                        v-if="scope.row.isOK"
                        v-model="scope.row.id"
                        style="width: 90%; hight: 100%; margin: auto"
                      />
                      <span v-else>{{ scope.row.id }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column> -->
              <el-table-column label="开放参数名">
                <template slot-scope="scope">
                  <el-form :model="scope.row">
                    <el-form-item size="mini">
                      <el-input
                        v-if="scope.row.isOK"
                        v-model="scope.row.openparam"
                        style="width: 90%; hight: 100%; margin: auto"
                      />
                      <span v-else>{{ scope.row.openparam }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column label="接入参数名">
                <template slot-scope="scope">
                  <el-form :model="scope.row">
                    <el-form-item size="mini">
                      <el-input
                        v-if="scope.row.isOK"
                        v-model="scope.row.receiveparaname"
                        style="width: 90%; hight: 100%; margin: auto"
                      />
                      <span v-else>{{ scope.row.receiveparaname }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column label="参数类型">
                <template slot-scope="scope">
                  <el-form :model="scope.row">
                    <el-form-item size="mini">
                      <el-input
                        v-if="scope.row.isOK"
                        v-model="scope.row.receiveparatype"
                        style="width: 90%; hight: 100%; margin: auto"
                      />
                      <span v-else>{{ scope.row.receiveparatype }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <!-- <el-table-column label="扩展类型">
                <template slot-scope="scope">
                  <el-form :model="scope.row">
                    <el-form-item size="mini">
                      <el-input
                        v-if="scope.row.isOK"
                        v-model="scope.row.kuozhan"
                        style="width: 90%; hight: 100%; margin: auto"
                      />
                      <span v-else>{{ scope.row.kuozhan }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column> -->
              <el-table-column label="传递方式">
                <template slot-scope="scope">
                  <el-form :model="scope.row">
                    <el-form-item size="mini">
                      <el-input
                        v-if="scope.row.isOK"
                        v-model="scope.row.deliverway"
                        style="width: 90%; hight: 100%; margin: auto"
                      />
                      <span v-else>{{ scope.row.deliverway }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <!-- <el-table-column label="可选">
                <template slot-scope="scope">
                  <el-form :model="scope.row">
                    <el-form-item size="mini">
                      <el-input
                        v-if="scope.row.isOK"
                        v-model="scope.row.other"
                        style="width: 90%; hight: 100%; margin: auto"
                      />
                      <span v-else>{{ scope.row.other }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column> -->
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <span
                    v-if="!scope.row.isOK"
                    class="all-price-handle"
                    @click="handleEdit(scope.$index, scope.row)"
                  >
                    编辑
                  </span>
                  <span
                    v-else
                    class="all-price-handle"
                    @click="handleEdit(scope.$index, scope.row)"
                  >
                    确定
                  </span>
                  <span
                    class="all-price-handle"
                    @click="handleDelete1(scope.$index, scope.row)"
                  >删除</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="title" style="margin-top:20px;">编辑出参</div>
            <el-row style="padding-top:10px;">
              <el-button type="primary" round plain size="small" icon="el-icon-plus" @click="addNewTabble2">新增</el-button>
            </el-row>
            <el-table
              :key="tablekey1+1+'b'"
              :header-cell-style="{
                'text-align': 'center',

                background: '#FAFAFA',
                'font-weight': '400',
              }"
              :cell-style="{
                'text-align': 'center',

                'margin-bottom': '0',
              }"
              :data="addForm.tableDatas2"
              border
              style="margin-top: 10px"
            >
              <!-- <el-table-column label="ID">
                <template slot-scope="scope">
                  <el-form :model="scope.row">
                    <el-form-item size="mini">
                      <el-input
                        v-if="scope.row.isOK"
                        v-model="scope.row.id"
                        style="width: 90%; hight: 100%; margin: auto"
                      />
                      <span v-else>{{ scope.row.id }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column> -->
              <el-table-column label="开放参数名">
                <template slot-scope="scope">
                  <el-form :model="scope.row">
                    <el-form-item size="mini">
                      <el-input
                        v-if="scope.row.isOK"
                        v-model="scope.row.openparam"
                        style="width: 90%; hight: 100%; margin: auto"
                      />
                      <span v-else>{{ scope.row.openparam }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column label="接入参数名">
                <template slot-scope="scope">
                  <el-form :model="scope.row">
                    <el-form-item size="mini">
                      <el-input
                        v-if="scope.row.isOK"
                        v-model="scope.row.receiveparaname"
                        style="width: 90%; hight: 100%; margin: auto"
                      />
                      <span v-else>{{ scope.row.receiveparaname }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column label="参数类型">
                <template slot-scope="scope">
                  <el-form :model="scope.row">
                    <el-form-item size="mini">
                      <el-input
                        v-if="scope.row.isOK"
                        v-model="scope.row.receiveparatype"
                        style="width: 90%; hight: 100%; margin: auto"
                      />
                      <span v-else>{{ scope.row.receiveparatype }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <!-- <el-table-column label="扩展类型">
                <template slot-scope="scope">
                  <el-form :model="scope.row">
                    <el-form-item size="mini">
                      <el-input
                        v-if="scope.row.isOK"
                        v-model="scope.row.kuozhan"
                        style="width: 90%; hight: 100%; margin: auto"
                      />
                      <span v-else>{{ scope.row.kuozhan }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column> -->
              <el-table-column label="传递方式">
                <template slot-scope="scope">
                  <el-form :model="scope.row">
                    <el-form-item size="mini">
                      <el-input
                        v-if="scope.row.isOK"
                        v-model="scope.row.deliverway"
                        style="width: 90%; hight: 100%; margin: auto"
                      />
                      <span v-else>{{ scope.row.deliverway }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <!-- <el-table-column label="可选">
                <template slot-scope="scope">
                  <el-form :model="scope.row">
                    <el-form-item size="mini">
                      <el-input
                        v-if="scope.row.isOK"
                        v-model="scope.row.other"
                        style="width: 90%; hight: 100%; margin: auto"
                      />
                      <span v-else>{{ scope.row.other }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column> -->
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <span
                    v-if="!scope.row.isOK"
                    class="all-price-handle"
                    @click="handleEdit(scope.$index, scope.row)"
                  >
                    编辑
                  </span>
                  <span
                    v-else
                    class="all-price-handle"
                    @click="handleEdit(scope.$index, scope.row)"
                  >
                    确定
                  </span>
                  <span
                    class="all-price-handle"
                    @click="handleDelete2(scope.$index, scope.row)"
                  >删除</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="开放PATH" name="2">
            <el-form-item label="开放PATH" prop="pathname">
              <el-input v-model="addForm.pathname" placeholder="请输入开放PATH" />
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
        <el-row type="flex" align="middle" justify="center" style="padding:10px 0;">
          <el-col :span="4">
            <el-button type="primary" icon="el-icon-arrow-left" :disabled="activeIndex ==0" @click="prevStep">上一步</el-button>
          </el-col>
          <el-col :span="4">
            <el-button v-if="activeIndex != 2" type="primary" :disabled="activeIndex ==2" @click="nextStep">下一步<i class="el-icon-arrow-right el-icon--right" /></el-button>
            <el-button v-else type="primary" :disabled="!addForm.pathname" @click="confirm"> 完成</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

  </div>
</template>
<script>
// 导入lodash 对数据进行深拷贝
import _ from 'lodash'
import { updateData } from '@/api/user'

export default {
  data() {
    return {
      activeIndex: '0',
      // 添加商品的表单数据对象
      addForm: {
        servicename: '',
        serviceversion: '',
        servicelength: '',
        wsdladress: '',
        namespace: '',
        endpoint: '',
        bindling: '',
        tableDatas: [],
        tableDatas2: []
      },
      // 定义校验规则
      addFormRules: {
        servicename: [
          { required: true, message: '请输入服务名称', trigger: 'blur' }
        ],
        serviceversion: [
          { required: true, message: '请输入服务版本', trigger: 'blur' }
        ],
        wsdladress: [
          { required: true, message: '请输入WSDL地址', trigger: 'blur' }
        ],
        namespace: [
          { required: true, message: '请输入命名空间', trigger: 'blur' }
        ],
        endpoint: [
          { required: true, message: '请输入EndPoint', trigger: 'blur' }
        ],
        bindling: [
          { required: true, message: '请输入Bindling', trigger: 'blur' }
        ],
        pathname: [
          { required: true, message: '请输入开放PATH', trigger: 'blur' }
        ]
      },
      tablekey1: 1,
      obj1: {
        isOK: true,
        // id: '',
        openparam: '',
        receiveparaname: '',
        receiveparatype: '',
        // kuozhan: '',
        deliverway: '',
        other: ''
      }
    }
  },
  computed: {
    cateID() {
      if (this.addForm.goods_cat.length === 3) {
        // 证明包含了三级分类
        return this.addForm.goods_cat[2]
      }
      return null // 证明没有三分类
    }
  },
  created() {
  },
  methods: {
    // tab标签页切换之前的钩子函数
    beforeTabLeave(acitvename, oldActiveName) {
      // 判断是否在第一个标签页，且没有选择商品分类
      if (oldActiveName === '0' && (!this.addForm.servicename || !this.addForm.serviceversion)) {
        this.$message.error('请先完成本步骤！')
        return false // return false 会禁止跳转tab栏
      }
      // 判断是否在第二个标签页，
      if (oldActiveName === '1' && acitvename !== '0' && (!this.addForm.wsdladress || !this.addForm.namespace)) {
        this.$message.error('请先完成本步骤！')
        return false
      }
      if (oldActiveName === '0' && acitvename === '2') {
        this.$message.error('只能进入步骤2！')
        return false
      }
    },
    // 下一步
    nextStep() {
      // 判断是否在第一个标签页，且没有选择商品分类
      if (this.activeIndex === '0' && (!this.addForm.servicename || !this.addForm.serviceversion)) {
        this.$message.error('请先完成本步骤！')
        return
      }
      // 判断是否在第二个标签页，且没有选择商品分类
      if (this.activeIndex === '1' && !this.addForm.wsdladress) {
        this.$message.error('请先完成本步骤！')
        return
      }
      // 切换到下一个标签页
      this.activeIndex = this.activeIndex === '0' ? '1' : '2'
    },
    // 上一步
    prevStep() {
      // 切换到上一个标签页
      this.activeIndex = this.activeIndex === '1' ? '0' : '1'
    },
    // 点击tab切换触发的事件
    tabClicked() {
    },
    // 提交数据
    add() {
      // 对表单进行校验 对整个表单进行校验的方法
      this.$refs.addFormRef.validate(async(valid) => {
        // 判断是否通过表单校验
        if (!valid) {
          // 证明没通过验证
          return this.$message.error('请填写必要对表单项目')
        }
        const form = _.cloneDeep(this.addForm) // 深拷贝数据

        // 发起网络请求,添加商品，注意商品名称必须是唯一对
        const res = await updateData(form)
        if (res.meta.status !== 201) {
          console.log(res)
          return this.$message.error('添加商品失败')
        }
        // 添加商品成功
        this.$message.success('提交成功')
      })
    },
    handleEdit(index, row) {
      this.tablekey1++
      row.isOK = !row.isOK
      console.log(index, row)
    },
    handleDelete1(index, row) {
      console.log('aaaa')
      this.addForm.tableDatas.splice(index, 1)
      console.log(this.addForm.tableDatas)
      this.tablekey1++
    },
    addNewTabble1() {
      this.tablekey1++
      this.addForm.tableDatas.push({
        isOK: true,
        // id: '',
        openparam: '',
        receiveparaname: '',
        receiveparatype: '',
        // kuozhan: '',
        deliverway: ''
        // other: ''
      })
    },
    handleDelete2(index, row) {
      console.log(index, row)
      this.addForm.tableDatas2.splice(index, 1)
    },
    addNewTabble2() {
      this.tablekey1++
      this.addForm.tableDatas2.push({
        isOK: true,
        // id: '',
        openparam: '',
        receiveparaname: '',
        receiveparatype: '',
        // kuozhan: '',
        deliverway: ''
        // other: ''
      })
    },
    confirm() {
      this.$message.success('创建成功！')
      console.log(this.addForm)
      this.add()
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 26px;
    line-height: 46px;
  }
}
.form_tab{
  padding: 10px 0;
  .title{
    height: 35px;
    line-height: 35px;
    padding-left: 10px;
    border-left: 5px solid #409eff;
    background-color: #e6f7ff;
  }
  .all-price-handle{
    cursor: pointer;
    padding: 5px;
  }
  .el-form-item--mini.el-form-item{
    margin-bottom: 0;
  }
}
.el-checkbox{
    margin: 0 10px 0px 0px!important;
}
.previewImg{
    width: 100%;
}
.btnAdd{
    margin-top: 15px;
}
</style>
